<template>
  <div id="logindiv">
    <el-form ref="form" :model="d" class="form">
      <el-form-item prop="server_id" class="formitem" :rules="[formRulesMixin.notNull]">
        <el-input v-model="d.server_id" placeholder="请输入登录名" class="input" size="large" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" :loading="false" @click.prevent="toLogin" native-type="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive,ref,getCurrentInstance } from 'vue'
let { proxy } = getCurrentInstance()
let d = reactive({
  server_id: "1",
})
let toLogin = () => {
  proxy.$refs['form'].validate(valid => {
    if (valid) {
      proxy.$ajax({
        baseURL:proxy.$setting.globalUrl.base,
        url: 'companySync/login',
        data: d,
        bfLoading: true
      }).then(date => {
        if(date.success){
          sessionStorage.setItem("token", date.msg.token)
          sessionStorage.setItem("ID", date.msg.company_id)
          proxy.routerPushMixin('main')
        }else{
          proxy.elMessageMixin(date.err, 'error')
        }
      }).catch(() => {})
    } else {
      return false
    }
  })
}
</script>
<style scoped>
#logindiv { background-color: #FFF;  margin:0 auto; width: 500px; height: 450px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.form { width: 300px; }
#login #logindiv span.title { width: 400px; padding-bottom: 5px; margin-bottom:30px; border-bottom: 1px solid #CCC; font-size: 18px; }
#login #logindiv span.title .selected { font-weight: bold; }
.input { width: 300px; }
.btn { background-color: #ff6a00; border: 0; font-size: 16px; width: 300px; height: 42px; color: #FFF; display: flex; justify-content: center; align-items: center; margin: 30px 0 0 0; }
</style>